<template>
  <div>
    <div>Home</div>
    <!-- 2级路由 -->
    <!-- 多层嵌套路由 -->
    <!-- 可以直接写地址 字符串写法-->
    <router-link to="/home/music?name=周杰伦&id=1">点击跳转music</router-link>
    <!-- 可以用对象的写法 给路由起别名 也可以直接写path后写完整的路径 -->
    <router-link :to="{ name: 'Game', params: { id: 1, name: '罗飞' } }"
      >点击跳转游戏</router-link
    >
    <router-link
      :to="{
        path: '/home/news',
        query: {
          new: [
            '台湾籍男子涉台独在浙江被抓沸',
            '是否制裁佩洛西?中方:该有的都会有',
            '你打你的，我打我的，好戏还在后面',
          ],
        },
      }"
      >点击跳转News</router-link
    >
    <!-- keep-alive 路由切换的时候 本质是挂载和卸载的过程 使用keep-alive 包起来的组件就会缓存 他的身上有一个属性是include指定缓存哪个组件 起值就是组件名
     -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>